<!-- 
该组件是表格组件的头部区域 
主要用到的props有:
showTop：是否显示顶部区域 类型：布尔值
showBottom：是否显示底部区域 类型：布尔值
columns：存放一个对象数组，每个对象中存放着表头名name,与显示与否show 类型：数组
layout：字符串 决定着表格顶部右边功能按钮的显示隐藏 类型：字符串
-->
<template>
    <div class="table-bar">
        <!-- 顶部区域 -->
        <div class="top-wrap" v-show="showSearchWrap">
            <slot name="top"></slot>
        </div>
        <!-- 底部区域 -->
        <div class="bottom-wrap" v-if="showBottom">
            <div class="left-wrap">
                <slot name="bottom"></slot>
            </div>
            <!-- 右边功能按钮 -->
            <div class="right-wrap">
                <el-button-group>
                    <!-- 搜素按钮 -->
                    <el-tooltip  
                    effect="dark" 
                    content="搜索按钮" 
                    placement="top-start"
                    >
                        <el-button icon="el-icon-search" @click="isShowSearchWrap()" size="small" v-if="layout.indexOf('search') !== -1"/>
                    </el-tooltip>
                    <!-- 重置按钮 -->
                    <el-tooltip  
                    effect="dark" 
                    content="刷新按钮" 
                    placement="top-start"
                    >
                        <el-button icon="el-icon-refresh-right" @click="refresh()" size="small" v-if="layout.indexOf('refresh') !== -1"/>
                    </el-tooltip>
                    <!-- 下拉菜单 选择要显示的表头内容 -->
                    <el-popover placement="bottom-end" width="150" trigger="hover" @show="showPopover" v-if="layout.indexOf('column') !== -1">
                        <el-checkbox-group v-model="colSelected" :min="1">
                            <el-checkbox v-for="(item, index) in colOptions" :label="item" :key="item" @change="changeColumn($event, index)" />
                        </el-checkbox-group>
                        <el-button size="small" slot="reference" icon="el-icon-s-operation"/>
                    </el-popover>
                </el-button-group>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TableBar',
    inject: ["reload"],
    props: {
        // 是否显示顶部区域
        showTop: {
            type: Boolean,
            default: false
        },
        // 是否显示底部区域
        showBottom: {
            type: Boolean,
            default: true
        },
        // 存放表头的内容的数组 数组里是对象 对象里存放的每一项表头名称和show（显示与否）
        columns: {
            type: Array,
            default: () => []
        },
        // 右边功能按钮的显示，默认是三个都显示
        layout: {
            type: String,
            default: 'search, refresh, column'
        }
    },
    data() {
        return {
            showSearchWrap: true, // 存放父组件传值--showTop
            colOptions: [],
            colSelected: [],
            columnChage: false
        }
    },
    mounted() {
        this.showSearchWrap = this.showTop
    },
    methods: {
        // 刷新页面
        refresh() {
            this.reload()
        },
        // 是否显示搜素区域
        isShowSearchWrap() {
            this.showSearchWrap = !this.showSearchWrap
            if(!this.showSearchWrap) this.$emit('closed')
        },
        // 列的显示隐藏
        showPopover() {
            if(!this.columnChage) {
                this.columns.map(item => { this.colOptions.push(item.name) })
                this.colSelected = this.columns.map(item => {
                    if(item.show) {
                        return item.name
                    }
                    
                })
                this.columnChage = true
            }
        },
        // 选择列
        changeColumn(show, index) {
            let columns = this.columns
            columns.map((item,i) => {
                if(index === i) {
                    item.show = show
                }
            })
            // 调用父组件方法 并传递columns 父组件要有一个方法changeColumn来接收
            this.$emit('changeColumn', columns)
        }
    }
}
</script>

<style lang="scss" scoped>
  .table-bar {
    padding-bottom: 15px;

    .top-wrap {
      transition: height .3s;
    }

    .bottom-wrap {
      display: flex;
      justify-content: space-between;
      height: 32px;
    }
  }
</style>